<template>
  <section class="padding">
    <BasicInfo ref="basic"></BasicInfo>

    <CargoInfo
      ref="cargo"
      class="margin-top"
      :actionUrl="actionUrl"
      :goodsInfo.sync="goodsInfo"
    ></CargoInfo>
    <div class="padding text-center">
      <el-button type="success" @click="submitForm(10)">提交待确认</el-button>
      <el-button type="success" @click="submitForm(20)">提交待审批</el-button>
    </div>
  </section>
</template>

<script>
import BasicInfo from './components/BasicInfo'
import CargoInfo from './components/CargoInfo'
import { mapGetters } from 'vuex'
import { isNoEmptyObject, checkRowsEmpty } from '@/utils/waybill-public'
import {
  saveAbroadWaybill,
  initAbroadWaybillRender,
  downLoadGoodsInfo
} from '@/api/abroadWaybill'
export default {
  name: 'OrderToOrderToOverseasWarehouseShipping',
  computed: {
    ...mapGetters(['publicData'])
  },
  components: {
    CargoInfo,
    BasicInfo
  },
  data() {
    return {
      waybillId: '',
      goodsInfo: [{}, {}, {}, {}, {}, {}],
      serviceItemMap: {},
      actionUrl: '/abroad/waybills/batchUploadGoodsInfoData',
      uploadDialog: false
    }
  },

  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const { data } = await initAbroadWaybillRender()
      this.serviceItemMap = data.serviceItemMap
    },
    submitForm(status) {
      const hotTable = this.$refs.cargo.$refs.hotTable.data.filter(x =>
        checkRowsEmpty(x)
      )
      console.log('hotTable :>> ', hotTable)
      this.$refs.basic.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (hotTable.length === 0) {
            this.$message.error('请填写必填信息')
            return
          }
          for (const [i, e] of hotTable.entries()) {
            if (!e.sku || !e.productName) {
              this.$message.error(`请填写第${i + 1}行 必填数据`)
              return
            }
            if (
              e.productNum &&
              Object.prototype.toString.call(e.productNum) !== '[object Number]'
            ) {
              this.$message.error(`第${i + 1}行 产品个数 ,请填写正确数字`)
              return false
            }
            if (
              e.productCtns &&
              Object.prototype.toString.call(e.productCtns) !==
                '[object Number]'
            ) {
              this.$message.error(`第${i + 1}行 箱数 ,请填写正确数字`)
              return false
            }
            if (
              e.productWeight &&
              Object.prototype.toString.call(e.productWeight) !==
                '[object Number]'
            ) {
              this.$message.error(`第${i + 1}行 重量 ,请填写正确数字`)
              return false
            }
            if (
              e.productVolume &&
              Object.prototype.toString.call(e.productVolume) !==
                '[object Number]'
            ) {
              this.$message.error(`第${i + 1}行 体积 ,请填写正确数字`)
              return false
            }
          }
          this.saveInfo(status)
        } else {
          console.log('error submit!!')
        }
      })

      return
    },
    async saveInfo(status) {
      this.$store.dispatch('app/toggleDialog', true)
      const ruleForm = this.$refs.basic.ruleForm
      const goodsInfo = []
      for (const i of this.goodsInfo) {
        if (i.sku) {
          goodsInfo.push(i)
        }
      }
      ruleForm.status = status
      ruleForm.waybillGoodsInfos = goodsInfo
      ruleForm.serviceItem = this.$refs.basic.ruleForm.serviceItemArr.join()
      const { code, data: waybillId } = await saveAbroadWaybill(ruleForm)
      if (code === 200) {
        this.$message({
          type: 'success',
          message: '提交成功'
        })
        if (status === 10) {
          this.$router.push({ name: 'PendingWaybill' })
        } else {
          this.$router.push({ name: 'AbroadWaybillList' })
        }

        this.waybillId = waybillId
      }
      this.$store.dispatch('app/toggleDialog', false)
    },
    closeDialog() {
      this.uploadDialog = false
    },
    async downloadCargoInfo() {
      const data = await downLoadGoodsInfo({
        waybillId: this.waybillId
      })
    },
    uploadCargoInfo(file) {
      console.log('uploadCargoInfo', file)
    }
  }
}
</script>

<style lang="scss" scoped>
.relative {
  .absolute {
    right: 10px;
    top: -40%;
  }
}
</style>
